<template>
<div>
  <div class="box">
    <h3>部门管理</h3>
    <el-button type="primary" @click="isShow">添加一级节点</el-button>
    <div class="listbox">
      <div class="tree">
      <el-tree :data="info" :props="defaultProps" @node-click="handleNodeClick" default-expand-all/>
    </div>
    <!-- 添加子节点 -->
    <div class="details" v-show="show" >
      当前节点：{{datas.name}} <br/>
      节点名称 <el-input  placeholder=""   v-model="data.msg.name"/><br/>
      <el-button type="info" @click="del">删除当前节点</el-button>
      <el-button type="primary" @click="update">修改当前节点</el-button>
    <el-button type="success"  @click="addson">添加子节点</el-button>
  </div>
  <!-- 添加一级节点 -->
      <div class="details" v-show="show1">
        节点名称 <el-input  placeholder="" v-model="data.msg.name"/><br/>
        <el-button type="primary" @click="add">添加一级节点</el-button>

      </div>
    </div>
  </div>
</div>
</template>

<script setup lang='ts'>
import { ElMessage } from "element-plus";
import {  ref,reactive,toRefs} from "vue";
import {  departmentlist,departmentAdd,departmentdel} from "../../api/index";

let results:any={}
const handleNodeClick = (obj:any) => {
  show.value=true
  show1.value=false
  datas.name=obj.name
  data.msg.id=obj.id
  data.msg.pid=obj.pid
  results=obj
  // console.log(data.msg.id);
  
  
}
const datas=reactive({
  info:[],
  name:''
})
const data: any = reactive({
      msg: {
        id: null,
        pid: '',
        name: "",
      }
    })
const defaultProps = {
  children: "children",
  label: "name",
}

const form =reactive({
  page:1,
  psize:10,
})
const { info } = toRefs(datas);
const {msg }=toRefs(data)

let show=ref(false)
let show1=ref(false)

const isShow=()=>{
  show.value=false
  show1.value=true
}

// 请求列表
const getdepartmentlist=async()=>{
  let res:any=await departmentlist(form)
  // console.log(res);
  if(res.errCode==10000){
    info.value=res.data.list
  }
  
}
getdepartmentlist()
// 添加
const add=async ()=>{
  let res:any=await departmentAdd(data.msg)
  // console.log(res);
  if(res.errCode==10000){
    data.msg.name=''
    ElMessage.success('添加成功')
    getdepartmentlist()
  }
  
}
// 添加子节点
const addson=async ()=>{
  data.msg.id=0
  data.msg.pid=results.id
  let res:any=await departmentAdd(data.msg)
  // console.log(res);
  if(res.errCode==10000){
    data.msg.name=''
    ElMessage.success('添加成功')
    getdepartmentlist()
  }
  
}
// 修改 
const update=async ()=>{
  let res:any=await departmentAdd(data.msg)
  // console.log(res);
  if(res.errCode==10000){
    data.msg.name=''
    ElMessage.success('修改成功')
    getdepartmentlist()
  }
  
}
// 删除
const del=async (id:any)=>{
  
  console.log(data.id);
  
  let res:any =await departmentdel({id:data.msg.id})
  // console.log(res);
  if(res.errCode==10000){
    ElMessage.success('删除成功')
    getdepartmentlist()
  }
  
}
</script>

<style scoped lang='less'>
h3{
  font-weight: normal;
  margin-bottom: 20px;
}
.listbox{
  display: flex;
}
.tree{
  width: 300px;
}
.details{
  width: 400px;
  padding: 20px;
  .el-input{
  width: 300px;
  padding: 20px;
}
}

</style>